<template>
  <div id="new-course">
    <head-tabar></head-tabar>
    <div
      style="position: absolute;margin-top: 130px;width: 600px;border: 1px solid #d6d6d6;margin-left: 27%;padding: 50px">
      <el-form ref="form" :model="form">
        <el-form-item>
          课程封面：
          <el-upload
            class="avatar-uploader"
            action="#"
            accept=".jpg,.jpeg,.png"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <el-image v-if="form.courseCover" :src="form.courseCover"  class="avatar" style="width: 200px;margin-left: 100px"> </el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          课程名称：
          <el-input v-model="form.courseName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          教师：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="form.teacher" placeholder="请输入内容"
                                                                 :disabled="true"></el-input>
        </el-form-item>
        <el-form-item>
          课程介绍：
          <el-input v-model="form.courseIntroduce" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          开课时间：
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          结课时间：
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div style="margin-left: 35%">
            <el-button type="success" @click="create(form.courseCover,form.courseName,form.startTime,form.courseIntroduce,form.endTime)">完成</el-button>
            <el-button type="info" @click="returnUrl()">返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import HeadTabar from "../../components/HomeTaber/HeadTabar";
import axios from "axios";

export default {
  name: "NewCourse",
  data() {
    return {
      form: {
        courseCover: null,
        courseName: '',
        teacher: localStorage.getItem('userName'),
        startTime: '',
        courseIntroduce: '',
        endTime: ''
      },
      teacherId:localStorage.getItem('userId')
    }
  },
  components: {
    HeadTabar
  },
  methods: {
    returnUrl() {
      window.close();
    },
    create(courseCover,courseName,startTime,courseIntroduce,endTime) {
      axios('/course/newcourse', {
        params: {
          courseCover:courseCover,
          courseName:courseName,
          courseIntroduce:courseIntroduce,
          gmtStart:startTime,
          gmtEnd:endTime,
          userId:this.teacherId
        },
        method: "post",
      }).then(res => {
        console.log(res.data)
        this.$router.push('/Home/Course')
      }).catch(function (error) {
        console.log(error);
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }
      console.log(file);

        //将文件转化为formdata数据上传
        let fd = new FormData()
        fd.append('file', file)
        console.log(fd)
        let that = this
        // post上传图片
        axios.post('/api/osa/upload', fd,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then((response) => {
            that.form.courseCover =  response.data.data.url
        }).catch((error) => {
          this.$message.error('头像上传失败，请重新上传!');
        })

      return true;
    }
  }
}
</script>

<style scoped>
.el-input {
  margin-bottom: 20px;
  width: 500px;
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
